<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="./../template/WorkspaceTemplate.xhtml"
                xmlns:c="http://java.sun.com/jsp/jstl/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"
                xmlns:f="http://java.sun.com/jsf/core">

    <ui:define name="top">
        
    </ui:define>

    <ui:define name="left">
    </ui:define>

    <ui:define name="right">
       
    </ui:define>

    <ui:define name="content">
        <style>
            .ui-helper-clearfix{
                display: inline-block;
            }
        </style>
        <h:form id="form1">
            <p:panel header="Create New User Account">
                <p:messages id="msgs" showDetail="true"/>
                <p:wizard widgetVar="wiz" flowListener="#{accountManagerBean.onFlowProcess}">
                    <p:tab id="basicInfo" title="Basic Information">
                        <p:panel header="Basic Information">
                            <h:panelGrid columns="3">
                                <h:outputText style="font-weight: bold" value="First Name: *"/>
                                <p:inputText required="true" label="First Name" requiredMessage="First Name is required."
                                             id="firstName" value="#{accountManagerBean.newStaff.firstName}"/>
                                <p:message for="firstName"/>

                                <h:outputText style="font-weight: bold" value="Last Name: *"/>
                                <p:inputText required="true" label="Last Name" requiredMessage="Last Name is required."
                                             id="lastName" value="#{accountManagerBean.newStaff.lastName}"/>
                                <p:message for="lastName"/>
                                
                                <h:outputText style="font-weight: bold" value="Department: *"/>
                                <p:autoComplete id="department"  forceSelection="true" required="true" requiredMessage="Department is required."
                                                value="#{accountManagerBean.newStaff.department}"   
                                                completeMethod="#{accountManagerBean.completeDepartments}"/>
                                <p:message for="department"/>

                                <h:outputText value="Address: "/>
                                <h:outputText value=""/>
                                <h:outputText value=""/>

                                <h:outputText style="font-weight: bold" value="Address Line1: *"/>
                                <p:inputText required="true" label="Address Line1" requiredMessage="Address Line1 is required."
                                             id="addressLine1" value="#{accountManagerBean.newStaff.homeAddress.addressLine1}"/>
                                <p:message for="addressLine1"/>

                                <h:outputText style="font-weight: bold" value="Address Line2: "/>
                                <p:inputText required="false" label="Address Line2" requiredMessage="Address Line2 is required."
                                             id="addressLine2" value="#{accountManagerBean.newStaff.homeAddress.addressLine2}"/>
                                <p:message for="addressLine2"/>

                                <h:outputText style="font-weight: bold" value="Zip Code: *"/>
                                <p:inputMask required="true" requiredMessage="Zip code is required." mask="999999"
                                             id="zipCode" value="#{accountManagerBean.newStaff.homeAddress.zipCode}"/>
                                <p:message for="zipCode"/>

                                <h:outputText style="font-weight: bold" value="City: *"/>
                                <p:autoComplete id="city" forceSelection="true" required="true" requiredMessage="City is required."
                                                value="#{accountManagerBean.newStaff.homeAddress.city}"   
                                                completeMethod="#{accountManagerBean.completeCity}"
                                                onSelectUpdate="country" selectListener="#{accountManagerBean.handleSelectCity}"/>
                                <p:message for="city"/>

                                <h:outputText style="font-weight: bold" value="State Name: "/>
                                <p:inputText required="false" label="State Name" requiredMessage="State name is required."
                                             id="stateName" value="#{accountManagerBean.newStaff.homeAddress.stateName}"/>
                                <p:message for="stateName"/>

                                <h:outputText style="font-weight: bold" value="Country: *"/>
                                <p:autoComplete id="country" forceSelection="true" required="true" requiredMessage="Country is required."
                                                value="#{accountManagerBean.newStaff.homeAddress.country}"   
                                                completeMethod="#{accountManagerBean.completeCountry}"
                                                onSelectUpdate="city" selectListener="#{accountManagerBean.handleSelectCountry}"/>
                                <p:message for="country"/>

                            </h:panelGrid>
                            <p:messages id="msgphone" showDetail="true"/>
                            <p:dataTable id="phoneTbl" value="#{accountManagerBean.newStaff.phones}" var="phone" update="msgphone">
                                <f:facet name="header">
                                    Contact Numbers
                                </f:facet>
                                <p:column headerText="Phone Type">
                                    <h:outputText value="#{phone.phoneTypeString}: *"/>
                                </p:column>
                                <p:column headerText="Phone Type">
                                    <p:inputMask required="true" requiredMessage="Phone number is required." mask="(99)9999 9999"
                                                 value="#{phone.number}"/>
                                </p:column>
                            </p:dataTable>
                        </p:panel>
                    </p:tab>

                    <p:tab id="account" title="User Account">
                        <p:panel header="Account Information">
                            <p:messages />
                            <h:panelGrid columns="3" columnClasses="label, value" styleClass="grid">
                                <h:outputText style="font-weight: bold" value="Account Username: *"/>
                                <p:inputText required="true" label="Account Username" requiredMessage="Account Username is required."
                                             validator="#{accountManagerBean.checkUsernameExists}"
                                             id="accUsername" value="#{accountManagerBean.newStaff.systemUserAccount.username}">
                                    <f:validateLength maximum="10" minimum="1"/>
                                </p:inputText>
                                <p:message for="accUsername"/>

                                <h:outputText style="font-weight: bold" value="Email Address: *"/>
                                <p:inputText required="true" label="Email Address" requiredMessage="Email address is required."
                                             id="emailAddr" value="#{accountManagerBean.newStaff.systemUserAccount.emailAddress}"
                                             validator="#{accountManagerBean.checkEmailExists}">
                                    <f:validateRegex pattern="[\w\.-]*[a-zA-Z0-9_]@[\w\.-]*[a-zA-Z0-9]\.[a-zA-Z][a-zA-Z\.]*[a-zA-Z]"/>
                                </p:inputText>
                                <p:message for="emailAddr"/>
                            </h:panelGrid>
                        </p:panel>
                    </p:tab>

                    <p:tab title="Assign Roles" id="assignRole">
                        <p:panel header="Assign Roles">
                            <h:panelGrid columns="3" columnClasses="label, value" styleClass="grid"></h:panelGrid>
                            <p:dataTable id="displayMulti" var="role" value="#{accountManagerBean.allRoles}" paginator="true" rows="10"
                                         paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink} {RowsPerPageDropdown}"  
                                         rowsPerPageTemplate="5,10,15"
                                         selection="#{accountManagerBean.selectedRoles}">
                                <f:facet name="header">
                                    Security Roles
                                </f:facet>

                                <p:column selectionMode="multiple"/>

                                <p:column headerText="Role Name" style="width:150px">
                                    <h:outputText value="#{role.roleName}"/>
                                </p:column>

                                <p:column headerText="Department" style="width: 150px">
                                    <h:outputText value="#{role.department}"/>
                                </p:column>

                            </p:dataTable>
                        </p:panel>
                    </p:tab>

                    <p:tab id="confirm" title="Confirmation">
                        <p:panel header="Confirmation">
                            <h:panelGrid columns="2">
                                <h:outputText style="font-weight: bold" value="First Name: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.firstName}"/>

                                <h:outputText style="font-weight: bold" value="Last Name: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.lastName}"/>

                                <h:outputText style="font-weight: bold" value="Address Line1: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.addressLine1}"/>

                                <h:outputText style="font-weight: bold" value="Address Line2: "/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.addressLine2}"/>

                                <h:outputText style="font-weight: bold" value="Zip Code: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.zipCode}"/>

                                <h:outputText style="font-weight: bold" value="City: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.city}"/>

                                <h:outputText style="font-weight: bold" value="State Name: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.stateName}"/>

                                <h:outputText style="font-weight: bold" value="Country: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.homeAddress.country}"/>

                                <c:forEach items="#{accountManagerBean.newStaff.phones}" var="phone" varStatus="forLoop">
                                    <h:outputText style="font-weight: bold" value="#{phone.phoneTypeString}"/>
                                    <h:outputText value="#{phone.number}"/>
                                </c:forEach>

                                <h:outputText style="font-weight: bold" value="Account Username: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.systemUserAccount.username}"/>

                                <h:outputText style="font-weight: bold" value="Email Address: *"/>
                                <h:outputText value="#{accountManagerBean.newStaff.systemUserAccount.emailAddress}"/>
                            </h:panelGrid>
                            <p:commandButton value="Submit" actionListener="#{accountManagerBean.save}" update="msgs"/>
                        </p:panel>
                    </p:tab>

                </p:wizard>
                <p:ajaxStatus style="width: 16px;height: 16px;">
                    <f:facet name="start">
                        <h:graphicImage value="./../images/ajaxloading.gif"/>
                    </f:facet>
                    <f:facet name="complete">
                        <h:outputText value=""/>
                    </f:facet>
                </p:ajaxStatus>
            </p:panel>
        </h:form>
    </ui:define>

    <ui:define name="bottom">
       
    </ui:define>

</ui:composition>
